<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      class Clock {
        constructor({ template }) {
          this.template = template;
        }
        render() {
          let date = new Date();
          // hours mins secs
          let hours = date.getHours();
          let mins = date.getMinutes();
          let secs = date.getSeconds();
          if (hours < 10) hours = "0" + hours;
          let output = this.template
            .replace("h", hours)
            .replace("m", mins)
            .replace("s", secs);
          console.log(output);
        }
        stop() {
          clearInterval(this.timer);
        }
        start() {
          this.render();
          this.timer = setInterval(() => this.render(), 1000);
        }
      }

      class MyClock extends Clock {
        start(s = 1000) {
          this.render();
          this.timer = setInterval(() => this.render(), s);
        }
      }
      const c = new MyClock({ template: "h:m:s" });
      c.start(3000);
    </script>
  </body>
</html>
